<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
  //ES5中的var是没有块级作用域的(if/for)
  //ES6中的let是有块级作用域的(if/for)
  //ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题
  //ES6中，加入了let,let它是有if和for的块级作用域
  //1.变量作用域：变量在什么范围内是可用的
  // {
  //   var name = 'why'
  //   console.log(name)
  // }
  // console.log(name)
  // 2.没有块级作用域引起的问题：if的块级
  // var func
  // if (true) {
  //   var name = 'why'

  //   func = function () {
  //     console.log(name)
  //   }

  //   // func()
  // }
  // name = 'kobe'
  // func()
  // console.log(name)

  var name = 'why'
  function abc(name) {
    console.log(name)
  }
  name = 'kobe'
  abc('aaaaa')

  // 3.没有块级作用域引起的问题：for的块级
  //为什么闭包可用解决问题：函数是一个作用域
  // var btns = document.getElementsByTagName('button')
  // for (var i=0; i<btns.length; i++) {
  //   (function (i) {
  //     btns[i].addEventListener('click', function () {
  //       console.log('第' + i + '个按钮被点击')
  //     })
  //   })(i)
  // }

  var btns = document.getElementsByTagName('button')
  for (let i=0; i<btns.length; i++) {
    btns[i].addEventListener('click', function () {
      console.log('第' + i + '个按钮被点击')
    })
  }

  //ES6
  // { i = 0
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }

  // { i = 1
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }

  // { i = 2
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }

  // { i = 3
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }

  // { i = 4
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }
</script>

</body>
</html>